<template>
  <ChartContainer ref="chartContainer" :option="option" />
</template>

<script>
import ChartContainer from './ChartContainer.vue';

export default defineComponent({
  name: 'LineChart',
  components: { ChartContainer },
  props: {
    category: {
      type: Array,
      default: () => ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
    },
    data: {
      type: Array,
      default: () => [
        {
          name: '销售量',
          data: [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]
        },
        {
          name: '订单量',
          data: [1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000]
        }
      ]
    },
    title: {
      type: String,
      default: ''
    }
  },
  setup(props) {
    const chartContainer = ref(null);

    watch(
      () => props.data,
      () => {
        initOption();
      }
    );

    const data = computed(() => props.data);
    const category = computed(() => props.category);

    const option = ref({});

    // 初始化配置项
    const initOption = () => {
      option.value = {
        title: {
          text: props.title,
          left: 'right',
          textStyle: {
            color: '#fff',
            fontSize: 10
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        color: ['#0080ff', '#4cd5ce'],
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: category,
            axisLabel: {
              show: true,
              color: '#6ba1bb',
              fontSize: 12,
              formatter: function (value) {
                //debugger
                var ret = ''; //拼接加\n返回的类目项
                var maxLength = 5; //每项显示文字个数
                var valLength = value.length; //X轴类目项的文字个数
                var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                if (rowN > 1) {
                  //如果类目项的文字大于3,
                  for (var i = 0; i < rowN; i++) {
                    var temp = ''; //每次截取的字符串
                    var start = i * maxLength; //开始截取的位置
                    var end = start + maxLength; //结束截取的位置
                    //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                    temp = value.substring(start, end) + '\n';
                    ret += temp; //凭借最终的字符串
                  }
                  return ret;
                } else {
                  return value;
                }
              }
            },
            axisLine: {
              lineStyle: {
                color: '#0a2b52',
                width: 0.5 //这里是为了突出显示加上的
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              onZero: false,
              lineStyle: {
                color: '#0a2b52',
                width: 1 //这里是为了突出显示加上的
              }
            },
            axisLabel: {
              formatter: function (val) {
                return val + '';
              },
              show: true,
              color: '#6ba1bb' //字体颜色
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: data.value[0].name,
            type: 'line',
            smooth: true,
            stack: 100,
            itemStyle: {
              //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
              color: new chartContainer.value.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#CB8993' // 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: '#CB8993' // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: '#CC56CB' // 100% 处的颜色
                }
              ]), //背景渐变色
              lineStyle: {
                // 系列级个性化折线样式
                width: 0.5,
                type: 'solid',
                color: '#CC56CB'
              }
            }, //线条样式
            symbolSize: 5, //折线点的大小
            areaStyle: {},
            data: data.value[0].data,
            emphasis: {
              itemStyle: {
                color: '#02675f',
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 0.5,
                  type: 'dotted',
                  color: '#02675f' //折线的颜色
                }
              }
            }
          },
          {
            name: data.value[1].name,
            type: 'line',
            smooth: true,
            //  symbol: "none", //去掉折线点
            stack: 100,
            itemStyle: {
              //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
              color: new chartContainer.value.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#64CAFA' // 0% 处的颜色
                },
                {
                  offset: 0.5,
                  color: '#64CAFA' // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: '#0078D7' // 100% 处的颜色
                }
              ]), //背景渐变色
              lineStyle: {
                // 系列级个性化折线样式
                width: 0.5,
                type: 'solid',
                color: '#0078D7'
              }
            }, //线条样式
            symbolSize: 5, //折线点的大小
            areaStyle: {},
            data: data.value[1].data,
            emphasis: {
              itemStyle: {
                color: '#02675f',
                lineStyle: {
                  // 系列级个性化折线样式
                  width: 0.5,
                  type: 'dotted',
                  color: '#02675f' //折线的颜色
                }
              }
            }
          }
        ]
      };
    };

    onMounted(() => {
      initOption();
    });

    return {
      option,
      chartContainer
    };
  }
});
</script>
